import React, {useEffect, useState} from 'react';
import {Input, Select, Space} from "antd";
import icons from "./icons";

const {Option} = Select

const SelectSocialCard = (props)=>{

    const {disabled,update,index,initial:initialValue} = props
    const [isShow,setIsShow] = useState(false)
    const [site,setSite] = useState('');
    //设置站点的名称
    const [name,setName] = useState('github')

    function onChangeOption(value){
        setName(value)
        if(value==='no'){
            setIsShow(true)
            setSite('')
            update(index,{name:name,link:''})
        }else {
            setIsShow(false)
            update(index,{name:value,link:site})
        }

    }
    function onSiteChange(e){
        setSite(e.target.value)
        update(index,{name:name,link:e.target.value})
    }

    useEffect(()=>{
        setName(initialValue.name)
        setSite(initialValue.link)
    },[])

    return (
        <Space style={{opacity:disabled?0:1}}>
            <Select disabled={disabled} value={name} onChange={onChangeOption} style={{width:'100px'}} >
                <Option  value="github">{icons['github']()}Github</Option>
                <Option  value="gitee">{icons['gitee']()}Gitee</Option>
                <Option  value="csdn">{icons['csdn']()}CSDN</Option>
                <Option  value="cnblogs">{icons['cnblogs']()}博客园</Option>
                <Option  value="juejin">{icons['juejin']()}掘金</Option>
                <Option  value="qq">{icons['qq']()}QQ</Option>
                <Option  value="wechat">{icons['wechat']()}微信</Option>
                <Option  value={"no"}>{icons["none"]()}不设置</Option>
            </Select>
            <Input disabled={disabled||isShow} value={site} onChange={onSiteChange} placeholder="输入对应的网址"/>
        </Space>
    )
}



export default SelectSocialCard;